<template>
  <div>
    <div
      class="list"
      v-for="item in list"
      :key="item.id"
      @click="goDetail(item.id)"
    >
      <img :src="item.img" alt="" />
      <div>{{ item.goodsname }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      flag: true,
    };
  },

  async created() {
    var result = await this.$http({
      url: "/xuexiao/api/getgoodlist",
      params: {
        cateid: 3,
        page: this.page,
        size: 5,
        type: 1,
      },
    });
    console.log(result.data);
    var list = result.data.list.goodData;
    this.list = list;
  },

  methods: {
    //跳转详情
    goDetail(id) {
      this.$router.push({ path: "/detail", query: { id } });
    },
    //触底加载更多
    async scroll() {
      // 获取高度
      let clientHeight = document.documentElement.clientHeight;
      let scrollTop = document.documentElement.scrollTop;
      let docHeight = document.documentElement.scrollHeight;
      // 触底请求
      if (clientHeight + scrollTop == docHeight) {
        if (!this.flag) return
        this.page += 1;
        var result = await this.$http({
          url: "/xuexiao/api/getgoodlist",
          params: {
            cateid: 3,
            page: this.page,
            size: 5,
            type: 1,
          },
        });
        var list = result.data.list.goodData || [];
        if (list.length < 5) {
          this.flag = false;
        }
        this.list = this.list.concat(list);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 300px;
  height: 150px;
  margin-top: 20px;
  border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list img {
  max-width: 200px;
  max-height: 100px;
}
</style>